import React from "react";
import addonspure from  "react-addons-pure-render-mixin";
import axios from 'axios';
import "./news.css";
import {Card, ListView, WhiteSpace, WingBlank} from "antd-mobile";
import {Link} from "react-router-dom";
import ReactDOM from "react-dom";
import "../../../config.js"


const ref_url = global.routes.database;

class News extends React.Component{

    constructor(props) {
        super(props);
        // const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            blog:[],
            nickname:"Mary",
            like_img: require("../imgs/like.png"),
            like_img_on: require("../imgs/likeon.png"),
            comm_img: require("../imgs/comment.png"),
            send_img: require("../imgs/send.png"),
            list: [],
            like_num:0,
            isShow: false,
        };

        this.click = this.click.bind(this);
        this.loadData = this.loadData.bind(this);
        this.shouldComponentUpdate = addonspure.shouldComponentUpdate.bind(this);
    }


    loadData(){
        axios.get(ref_url+"/hot_blog",{}).then(res=> {
            // console.log(res);
            this.setState({
                list:res.data.res,
                like_num:res.data.res.likes
            });
        }).catch(function (err) {
            console.log(err);
        });
    }

    componentDidMount() {
        this.loadData();
        //滚动的时候自动加载
        let timeoutId;

        //拿到 下拉加载更多 标签对象
        const  wrapper = this.refs.wrapper;

        const thisSh = this;

        function callback(){
            //判断wrapper 是否已经滚动到暴露在页面的可视范围内了

            //获取h2的距离
            //获取当前对象到视窗上边框的距离
            const top = wrapper.getBoundingClientRect().top;

            //获取窗口高度 h1
            const winHight =  window.screen.height;

            // console.log('h1:'+winHight)
            // console.log('h2:'+top)

            //this 是否存在？  当然不存在
            if(top < winHight){
                //加载数据  更新state  更新页面
                thisSh.loadMoreData(thisSh)
            }
        }

        //添加监听事件
        window.addEventListener("scroll",function () {
            //定时监听
            if(timeoutId){
                clearTimeout(timeoutId);
            }
            //定时 感觉有一个加载的过程
            timeoutId = setTimeout(callback,5000);
            // callback();
        }.bind(this),false);

    }

    loadMoreData(that){
        that.loadData()
    }



    click(e,q,index){

        var id = document.getElementById("like"+index);
        axios.get(ref_url+"/addLikes",{params:{
            likes:q+1,
                blogID:e
            }}).then(res=>{
                console.log(res);
        });
        this.loadData();

        id.src = this.state.like_img_on;
    }


    render() {

        return (
            <div className="all">
                <div>
                    <div id="demo" className="carousel slide" data-ride="carousel">

                        <ul className="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" className="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>


                        <div className="carousel-inner">
                            <div className="carousel-item active">
                                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3744857963,2663290586&fm=26&gp=0.jpg"/>
                            </div>
                            <div className="carousel-item">
                                <img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00247-533.jpg"/>
                            </div>
                            <div className="carousel-item">
                                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2382499141,2479814070&fm=15&gp=0.jpg"/>
                            </div>
                        </div>


                        <a className="carousel-control-prev" href="#demo" data-slide="prev">
                            <span className="carousel-control-prev-icon"></span>
                        </a>
                        <a className="carousel-control-next" href="#demo" data-slide="next">
                            <span className="carousel-control-next-icon"></span>
                        </a>

                    </div>
                </div>



                <div className="blogList">
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <div key={index}>
                                    <div className="blog container">
                                        <div className="blog_body">
                                            <div className="d-flex justify-content-start">
                                                <img className="pic_r" src={require('../imgs/1.jpg')} alt="头像"/>
                                                <div className="d-flex flex-column bd-highlight mb-3">
                                                    <label className="nickname">{this.state.nickname}</label>
                                                    <label className="pub_time">{item.pubTime}</label>
                                                </div>
                                            </div>
                                            <div className="blog_content d-flex justify-content-around">
                                                {
                                                    item.imgs.map((item,index)=>{
                                                        return (
                                                            <img key={index} className="blog_img" src={require('../'+item)}/>
                                                        )
                                                    })
                                                }
                                            </div>
                                            <p className="card-text">{item.words}</p>
                                            <div className="ico d-flex justify-content-around">
                                                <div className="col-sm"   onClick={()=>this.click(item.blogID,item.likes,index)}><img id={"like"+index} className="like" src={this.state.like_img}/>{item.likes}</div>
                                                <div className="col-sm">
                                                    <Link to={{pathname:"/terran/remark",state:{blogID:item.blogID}}}>
                                                        <img className="like" src={ this.state.comm_img}/>
                                                    </Link>
                                                </div>
                                                <div className="col-sm"><img className="like" src={this.state.send_img}/>{this.state.blog.send_num}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            )

                        })
                    }

                    <div className="load-more" ref="wrapper">
                        <div className="drop-statu-box" >
                            到底啦
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default News;